<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2023-11-09 10:21:36
 * @LastEditors: htang
 * @LastEditTime: 2024-03-08 09:18:31
-->
<template>
  <div class="right-echarts-node">
    <div class="tip">
      <span>报警数量趋势 [{{ years }}年]</span>
      <dv-decoration2 :dur="2" />
    </div>
    <div ref="alartEcharts" id="right-alart-echarts"></div>
  </div>
  <!-- <dv-loading v-if="loading">加载中...</dv-loading> -->
</template>

<script>
import { ref, watch, getCurrentInstance, onMounted, defineComponent, onUnmounted, nextTick } from 'vue';
import { alarmTrendApi } from '/@/api/data-statistics/index.ts';
import { Progress } from 'ant-design-vue';
import '@/assets/js/highcharts/highcharts.js';
import '@/assets/js/highcharts/highcharts-3d.js';
import '@/assets/js/highcharts/modules/exporting.js';
import * as echarts from 'echarts';
import moment from 'moment';
export default defineComponent({
  components: { Progress },
  setup() {
    let { proxy } = getCurrentInstance();

    let options = ref({});

    let loading = ref(false);

    let chart;

    let years = ref('');

    /**
     * 初始化图表
     */
    function initEcharts() {
      let chartDom = document.getElementById('right-alart-echarts');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        grid: {
          top: '20%',
          left: '2%',
          right: '2%',
          bottom: '5%',
          containLabel: true,
        },
        legend: {
          top: 15,
          data: '',
          textStyle: {
            color: '#fff',
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: '#fff',
              margin: 15,
            },
            interval: 0,
          },
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              fontSize: 20,
            },
          },
        ],
      };
      loading.value = true;
      alarmTrendApi().then((res) => {
        loading.value = false;
        let keys = Object.keys(res);
        let values = [];
        option.xAxis.data = [];
        let y = [];
        Object.values(res).map((_, i) => {
          if (_ !== '') {
            y.push(moment(keys[i]).format('YYYY'));
            option.xAxis.data.push(moment(keys[i]).format('MM-DD'));
            values.push(_);
          }
        });
        years.value = Array.from(new Set(y)).join(',');
        option.series[0].data = values.sort((a, b) => a - b);
        if (myChart) {
          myChart.resize();
        }
        option && myChart.setOption(option);
      });
    }

    onMounted(() => {
      initEcharts();
      window.addEventListener('resize', initEcharts);
    });

    return {
      years,
      loading,
    };
  },
});
</script>

<style lang="less" scoped>
.right-echarts-node {
  width: 100%;
  height: 300px; //calc(100vh - 800px);
  padding: 0 0 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.27) 0%, rgba(0, 0, 0, 0.01) 100%);
  backdrop-filter: blur(100px);
  .tip {
    position: relative;
    width: 100%;
    height: 44px;
    padding: 0 0 0 43.3px;
    background: url('@/assets/images/img-39.png') no-repeat;
    background-size: 100% 100%;
    line-height: 44px;
    font-size: 16px;
    color: #fff;
    span {
      position: relative;
    }
    .dv-decoration-2 {
      position: absolute;
      bottom: 0;
      left: 11px;
      width: 95%;
      height: 5px;
    }
  }
  #right-alart-echarts {
    width: 100%;
    height: calc(100% - 30px);
  }
}
</style>
